body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    background-color: #eee;
}
header{
    box-sizing: border-box;
    padding-left:20px;
    width:100%;
    height:60px;
    line-height:60px;
    background-image: linear-gradient(to left,#67e6a6,#075f29);
    border-bottom:1px solid #fff;
}
header #title{
    display: inline-block;
    font-size:28px;
    font-weight: bold;
    color:white;
}
#nav-top{
    width:100%;
    height:30px;
    line-height: 30px;
    background-color: #07a042;
   /* background-image: linear-gradient(to top,#3ba9b1,#0a7db3);*/
    color:white;
    padding-left:100px;
    box-sizing: border-box;
    border-bottom:1px solid #fff;
}
#nav-top ul{
    margin:0;
    padding:0;
}
#nav-top li{
    list-style:none;
    display: inline-block;
    width:6rem;
    text-align:center;
}
#nav-top li a{
    text-decoration: none;
    display: block;
    width:100%;
    color:white;
}
#nav-top li a:hover{
    background-color: #0000ff;
}
#nav-top li a:visited{
    color:white;
}
#nav-top .active{
    background-color: rgba(0,0,255,.5);
}


#content{
    width:100%;
    min-height:700px;
    text-align:center;
}

#content .dialog{
    background-color: white;
    display:inline-block;
    width:20%;
    min-width:300px;
    height:500px;
    border:1px solid #ddd;
    margin:10px;
    vertical-align: top;
    overflow-y:auto;
}

footer{
    width:100%;
    height:60px;
    text-align:center;
}

footer a{
    text-decoration: none;
}

.animation {
    padding: 5px 0;
    display: inline-block;
    text-align: center;
    background-image:linear-gradient(to top,#97cfe9,#9e9eee);
    overflow: hidden; /* 移动过程中隐藏超出容器的部分 */
    width:100%;
  }


  /* 定义动画 */
  @keyframes Animation {
    0% {
      /* 动画开始
         具体值：从距离动画元素顶端的xx位置处开始执行动画。比如200px，它会从距离动画元素顶端200px的位置开始执行动画。
         百分比：根据动画元素的宽度进行比例换算。
         0%：从动画元素顶端开始执行动画，100%：从动画元素尾部开始执行动画，200%：从距离动画元素宽度2倍的位置开始执行动画。
      */
      transform: translateX(-50%);
      /* transform: translateX(200px); */
    }
    100% {
      /* 动画完成
         负数表示向左移动的距离
         动画元素向左移动它自身的宽度后，动画结束
      */
      transform: translateX(50%);
    }
  }

  #content .animation h1{
    animation: Animation 10s linear infinite;
    letter-spacing: 10px;
    font-size:32px;
    color:rgb(5, 2, 43);
  }

  #content .dialog strong{
    font-size:24px;
    background-color: rgb(7, 3, 59);
    color:white;
    display: block;
    width:100%;
  }



  
 